<html>
<head>
  <title>Timeline | Tooltip on item onUpdateTime Option</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    .vis-item .vis-onUpdateTime-tooltip {
        border-radius: 4px;
    }
  </style>

  
</head>

<body>

<h1>Timeline Tooltip on item onUpdateTime Option</h1>

<h2>With <code>tooltipOnItemUpdateTime: true</code>
</h2>

<div id="mytimeline1"></div>

<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code>
</h2>

<div id="mytimeline2"></div>


<h2>With groups</h2>

<div id="mytimeline3"></div>
<script>

  // create items
  var numberOfItems = 10;
  var items = new vis.DataSet();
  var types = [ 'box', 'point', 'range']

 
  for (var order = 0; order < numberOfItems; order++) {
    var date = vis.moment();
   

    date.add(Math.round(Math.random() * 2), 'hour');
    items.add({
      id:      order,
      type: types[Math.floor(3 * Math.random())],
      content: 'Item ' + order,
      start:   date.clone().add(order + 1, 'hour'),
      end:     date.clone().add(order + 3, 'hour')
    });
  }
  
  // specify options
  var options = {
    multiselect: true,
    maxHeight: 400,
    start: new Date((new Date()).valueOf() - 10000000),
    end: new Date(1000*60*60*24 + (new Date()).valueOf()),
    editable: true
  };

  var options1 = jQuery.extend(options, {
    tooltipOnItemUpdateTime: true
  })
  var container1 = document.getElementById('mytimeline1');
  timeline1 = new vis.Timeline(container1, items, null, options1);

  var options2 = jQuery.extend(options, {
    orientation: 'top',
    tooltipOnItemUpdateTime: {
      template: function(item) {
        return 'html template for tooltip with <b>item.start</b>: ' + item.start; 
      }
    }
  })
  var container2 = document.getElementById('mytimeline2');
  timeline2 = new vis.Timeline(container2, items, null, options2);


  // create groups
  var numberOfGroups = 25; 
  var groups = new vis.DataSet()
  for (var i = 0; i < numberOfGroups; i++) {
    groups.add({
      id: i,
      content: 'Truck&nbsp;' + i
    })
  }

  // create items for groups
  var numberOfItems = 1000;
  var itemsWithGroups = new vis.DataSet();

  var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);

  for (var truck = 0; truck < numberOfGroups; truck++) {
    var date = new Date();
    for (var order = 0; order < itemsPerGroup; order++) {
      date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
      var start = new Date(date);

      date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
      var end = new Date(date);

      itemsWithGroups.add({
        id: order + itemsPerGroup * truck,
        group: truck,
        start: start,
        end: end,
        content: 'Order ' + order
      });
    }
  }


  var options3 = jQuery.extend(options, {
    orientation: 'top',
    tooltipOnItemUpdateTime: true
  })
  var container3 = document.getElementById('mytimeline3');
  timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);

</script>

</body>
</html>
